/* 主题颜色变量 */
$primary: #3c9cff;
$warning: #f9ae3d;
$success: #5ac725;
$error: #f56c6c;
$info: #909399;

/* 边距样式 - 全部方向 */
.m-0 { margin: 0 !important; }
.p-0 { padding: 0 !important; }

.m-5 { margin: 10rpx !important; }
.m-10 { margin: 20rpx !important; }
.m-15 { margin: 30rpx !important; }
.m-20 { margin: 40rpx !important; }
.m-30 { margin: 60rpx !important; }

.ml-5 { margin-left: 10rpx !important; }
.ml-10 { margin-left: 20rpx !important; }
.ml-15 { margin-left: 30rpx !important; }
.ml-20 { margin-left: 40rpx !important; }

.mr-5 { margin-right: 10rpx !important; }
.mr-10 { margin-right: 20rpx !important; }
.mr-15 { margin-right: 30rpx !important; }
.mr-20 { margin-right: 40rpx !important; }

.mt-5 { margin-top: 10rpx !important; }
.mt-10 { margin-top: 20rpx !important; }
.mt-15 { margin-top: 30rpx !important; }
.mt-20 { margin-top: 40rpx !important; }

.mb-5 { margin-bottom: 10rpx !important; }
.mb-10 { margin-top: 20rpx !important; }
.mb-15 { margin-bottom: 30rpx !important; }
.mb-20 { margin-bottom: 40rpx !important; }

.p-5 { padding: 10rpx !important; }
.p-10 { padding: 20rpx !important; }
.p-15 { padding: 30rpx !important; }
.p-20 { padding: 40rpx !important; }
.p-30 { padding: 60rpx !important; }

.pl-5 { padding-left: 10rpx !important; }
.pl-10 { padding-left: 20rpx !important; }
.pl-15 { padding-left: 30rpx !important; }
.pl-20 { padding-left: 40rpx !important; }

.pr-5 { padding-left: 10rpx !important; }
.pr-10 { padding-right: 20rpx !important; }
.pr-15 { padding-right: 30rpx !important; }
.pr-20 { padding-right: 40rpx !important; }

.pt-5 { padding-top: 10rpx !important; }
.pt-10 { padding-top: 20rpx !important; }
.pt-15 { padding-top: 30rpx !important; }
.pt-20 { padding-top: 40rpx !important; }

.pb-5 { padding-bottom: 10rpx !important; }
.pb-10 { padding-bottom: 20rpx !important; }
.pb-15 { padding-bottom: 30rpx !important; }
.pb-20 { padding-bottom: 40rpx !important; }

/* 边距样式 - 水平方向 */
.mx-5 { margin-left: 10rpx !important; margin-right: 10rpx !important; }
.mx-10 { margin-left: 20rpx !important; margin-right: 20rpx !important; }
.mx-15 { margin-left: 30rpx !important; margin-right: 30rpx !important; }
.mx-20 { margin-left: 40rpx !important; margin-right: 40rpx !important; }
.mx-30 { margin-left: 60rpx !important; margin-right: 60rpx !important; }

.px-5 { padding-left: 10rpx !important; padding-right: 10rpx !important; }
.px-10 { padding-left: 20rpx !important; padding-right: 20rpx !important; }
.px-15 { padding-left: 30rpx !important; padding-right: 30rpx !important; }
.px-20 { padding-left: 40rpx !important; padding-right: 40rpx !important; }
.px-30 { padding-left: 60rpx !important; padding-right: 60rpx !important; }

/* 边距样式 - 垂直方向 */
.my-5 { margin-top: 10rpx !important; margin-bottom: 10rpx !important; }
.my-10 { margin-top: 20rpx !important; margin-bottom: 20rpx !important; }
.my-15 { margin-top: 30rpx !important; margin-bottom: 30rpx !important; }
.my-20 { margin-top: 40rpx !important; margin-bottom: 40rpx !important; }
.my-30 { margin-top: 60rpx !important; margin-bottom: 60rpx !important; }

.py-5 { padding-top: 10rpx !important; padding-bottom: 10rpx !important; }
.py-10 { padding-top: 20rpx !important; padding-bottom: 20rpx !important; }
.py-15 { padding-top: 30rpx !important; padding-bottom: 30rpx !important; }
.py-20 { padding-top: 40rpx !important; padding-bottom: 40rpx !important; }
.py-30 { padding-top: 60rpx !important; padding-bottom: 60rpx !important; }

/* 边框样式 */
.border { border: 2rpx solid #eee; }
.border-top { border-top: 2rpx solid #eee; }
.border-right { border-right: 2rpx solid #eee; }
.border-bottom { border-bottom: 2rpx solid #eee; }
.border-left { border-left: 2rpx solid #eee; }

/* 背景颜色 */
.bg-primary { background-color: $primary !important; }
.bg-warning { background-color: $warning !important; }
.bg-success { background-color: $success !important; }
.bg-error { background-color: $error !important; }
.bg-info { background-color: $info !important; }

/* 文字颜色 */
.text-primary { color: $primary !important; }
.text-warning { color: $warning !important; }
.text-success { color: $success !important; }
.text-error { color: $error !important; }
.text-info { color: $info !important; }

.safe-area {
  padding-bottom: calc(constant(safe-area-inset-bottom) - 32rpx); /* 兼容 IOS<11.2 */
  padding-bottom: calc(env(safe-area-inset-bottom) - 32rpx); /* 兼容 IOS>11.2 */
  &::after {
    content: '';
    display: block;
    height: 32rpx;
  }
}